<template>
  <div class="container clearfix">
    <!-- <div class="form clearfix"> -->
    <div class="section">
      <div class="left">收货人名</div>
      <input type="text"
             class="inp"
             v-model="receive_name"
             maxlength="20"
             placeholder="请输入">
    </div>
    <div class="section">
      <div class="left">联系电话</div>
      <input type="idcard"
             v-model="user_tel"
             class="inp"
             maxlength="11"
             placeholder="请输入">
    </div>
    <div class="section"
         @tap="select_area()">
      <div class="left">所在地区</div>
      <span type="text"
            class="inp">{{area_str==''?'请选择':area_str}}</span>
    </div>
    <div class="section">
      <div class="left">详细地址</div>
      <input type="text"
             class="inp"
             placeholder="请输入"
             v-model="detail_address">
    </div>
    <div class="section isselect">
      <div class="left">设置为默认地址</div>
      <switch class="selection"
              :checked="is_default"
              @change="check_default()" />
    </div>
    <!-- </div> -->
    <div class="save-btn"
         @tap="save_address()">保存</div>
  </div>
</template>


<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      province_arr: [],
      city_arr: [],
      area_arr: [],
      province_id: "",
      city_id: "",
      area_id: "",
      area_str: "",
      receive_name: "",
      user_tel: "",
      detail_address: "",
      is_default: true
    };
  },
  methods: {
    select_area () {
      wx.navigateTo({ url: "/pages/package_mine/select_city_address_new/main" });
    },
    save_address () {
      if (this.receive_name == "") {
        common.mmk_Loading(2, "请输入收货人姓名");
        return false;
      } else if (this.user_tel == "") {
        common.mmk_Loading(2, "请输入收货人电话");
        return false;
      } else if (this.area_str == "") {
        common.mmk_Loading(2, "请选择地区");
        return false;
      } else if (this.detail_address == "") {
        common.mmk_Loading(2, "请输入详细地址");
        return false;
      } else {
        wx.showLoading({
          title: "提交中...", //提示的内容,
          mask: true //显示透明蒙层，防止触摸穿透,
        });
        common.fly_post(
          "api/v4_5/user_address/create",
          {
            receive_name: this.receive_name,
            phone: this.user_tel,
            province: this.province_id,
            city: this.city_id,
            area: this.area_id,
            address: this.detail_address,
            is_default: this.is_default ? 1 : 0
          },
          result => {
            common.mmk_Loading(1);
            let res = result.data;
            if (res.status_code == 0) {
              wx.showToast({
                title: "地址添加成功", //提示的内容,
                icon: "success", //图标,
                duration: 2000, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => {
                  wx.removeStorage({
                    key: "area_name",
                    success: res => {
                      setTimeout(() => {
                        wx.navigateBack({
                          delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                        });
                      }, 1500);
                    }
                  });
                }
              });
            } else {
              common.mmk_Loading(2, res.message);
            }
          }
        );
      }
    },
    check_default () {
      this.is_default = !this.is_default;
    }
  },
  onLoad () {
    wx.removeStorage({
      key: "address_data",
      success: res => { }
    });
    Object.assign(this.$data, this.$options.data());
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: "新增收货地址"
    });
  },
  onShow () {
    let that = this;
    wx.getStorage({
      key: "address_data",
      success: res => {
        let info = JSON.parse(res.data);
        that.area_str = `${info.province_name} ${info.city_name}市 ${
          info.area_name
          }`;
        that.province_id = info.province_id;
        that.city_id = info.city_id;
        that.area_id = info.area_id;
      },
      fail: () => { },
      complete: () => { }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(243, 244, 246, 1);
  .section {
    height: 44px;
    background-color: #fff;
    line-height: 44px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(243, 243, 243, 1);
    display: flex;
    font-size: 14px;
    box-sizing: border-box;
    .left {
      font-size: 14px;
      font-family: "Medium";
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 44px;
    }
    .inp {
      flex: 1;
      height: 100%;
      line-height: 44px;
      padding-left: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
  }
  .isselect {
    position: relative;
    margin-top: 10px;
    .selection {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  // }
  .save-btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgba(255, 56, 62, 1);
    text-align: center;
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>

